<template>
  <div class="file-manager">
    <!-- 左侧文件目录 -->
    <el-scrollbar class="scroll-Y file-tree">
      <file-node
        v-for="(item, index) in fileList"
        :key="index"
        :node="item"
        @show-file-content="showFileContent"
        @toggle-folder="toggleFolder"
      />
    </el-scrollbar>

    <!-- 右侧文件内容 -->
    <div class="file-content">
      <div v-if="currentFile">
        <div class="file-header">
          <div class="file-name">{{ currentFile.name }}</div>
          <div class="file-actions" v-if="showSave">
            <el-button type="primary" size="small" @click="saveFile">保存</el-button>
          </div>
        </div>
        <!-- 使用 Monaco Editor 作为代码编辑器 -->
        <div class="file-editor-container">
          <monaco-editor
            v-model="currentFile.content"
            :language="getFileLanguage(currentFile.name)"
            theme="vs"
            :options="{
              fontSize: 14,
              lineNumbers: 'on',
              minimap: { enabled: true },
              scrollBeyondLastLine: false,
              automaticLayout: true
            }"
          />
        </div>
      </div>
      <div v-else class="file-empty-content">
        请选择一个文件进行编辑
      </div>
    </div>
  </div>
</template>

<script>
import MonacoEditor from 'monaco-editor-vue';
import fileNode from './components/fileNode.vue';
import request from '@/utils/request';
import * as monaco from 'monaco-editor'
export default {
  name: 'FileManager',
  components: {
    MonacoEditor,
    fileNode,
  },
  props: {
    url: {
      type: String,
    },
    defaultFileList: {
      type: Array,
      default: () => [],
    },
    ctrlProps: {
      type: Object,
      required: false,
    },
    showSave:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 文件列表
      fileList: [],
      // 当前文件
      currentFile: null,
      // 支持的语言列表
      languageList: ['javascript', 'typescript', 'html', 'css', 'less',
        'scss', 'json', 'markdown', 'vue', 'python', 'java', 'xml', 'sql'],
    };
  },
  mounted() {
    if (this.url) {
      this.getFileList();
    }
    // 注册 Monaco Editor 语言
    this.languageList.forEach((preLang) => {
      monaco.languages.register({ id: preLang });
    });
  },
  methods: {
    getFileList() {
      this.requestParam = {
        url: this.url,
        method: 'GET',
      };
      request(this.requestParam)
        .then((res) => {
          console.log(res, '获取文件列表');
          if (res.result && res.result.fileList) {
            this.fileList = res.result.fileList;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    toggleFolder(folder) {
      this.$set(folder, 'expanded', !folder.expanded);
    },
    showFileContent(file) {
      this.currentFile = file;
    },
    getFileLanguage(filename) {
      const ext = filename.split('.').pop().toLowerCase();
      const languageMap = {
        js: 'javascript',
        jsx: 'javascript',
        ts: 'typescript',
        tsx: 'typescript',
        html: 'html',
        css: 'css',
        less: 'less',
        scss: 'scss',
        json: 'json',
        md: 'markdown',
        vue: 'vue',
        py: 'python',
        java: 'java',
        xml: 'xml',
        sql: 'sql',
      };
      return languageMap[ext] || 'plaintext';
    },
    saveFile() {
      this.$message.success('文件保存成功');
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-Y {
  width: 300px;
  height: calc(100vh - 116px);

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.file-manager {
    display: flex;
    height: calc(100vh - 100px);

  .file-tree {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .file-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;

    .file-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .file-name {
        font-size: 18px;
        font-weight: bold;
      }

      .file-actions {
        display: flex;
        gap: 10px;
      }
    }

    .file-editor-container {
      flex: 1;
      height: calc(100vh - 180px);
      border: 1px solid #ddd;
    }

    .file-empty-content {
      color: #999;
      text-align: center;
      margin-top: 100px;
    }
  }
}
</style>
